<script setup name="AttachmentIcon">
import { checkFormatByFileName } from '/@/utils/commonRequest';

// expects props options
const props = defineProps({
	attachmentUrl: {
		type: String,
		default: '',
	},
	attachmentFullName: {
		type: String,
		default: '',
	},
});

let fileType = ref('');

onMounted(() => {
	fileType.value = checkFormatByFileName(props.attachmentFullName);
});
</script>

<template>
	<div class="attachment-icon">
		<!-- 图片 -->
		<el-image v-if="fileType === 'image'" :src="attachmentUrl" lazy></el-image>
		<!-- pdf -->
		<svg v-if="fileType === 'pdf'" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="2884" width="100%">
			<path
				d="M416.463622 822.529429l75.731822 0L492.195443 711.688995l26.514887 0c30.884404-0.047072 54.462402-7.697309 70.728878-22.898523 16.260335-15.213493 24.457018-37.719066 24.578792-67.51979 0.121773-26.03905-6.630001-47.354518-20.240997-63.933101-13.631462-16.575514-34.849716-25.161053-63.644529-25.689079L416.463622 531.648502 416.463622 822.529429 416.463622 822.529429zM587.842851 64.949244l0 243.814981 243.777119 0 0 648.895857L183.359586 957.660082 183.359586 64.949244 587.842851 64.949244 587.842851 64.949244zM227.308541 430.224532l0 483.501946 560.368614 0 0-483.501946L227.308541 430.224532 227.308541 430.224532zM493.422388 586.208119l14.274098 0c9.605775-0.045025 16.894785 2.876514 21.875217 8.712429 4.973268 5.835915 7.472182 14.72333 7.493671 26.752294-0.021489 12.156878-2.520403 21.12718-7.493671 26.924209-4.980431 5.754051-12.269441 8.577353-21.875217 8.538467l-14.274098 0L493.422388 586.208119 493.422388 586.208119zM621.330546 64.949244l215.57173 215.564567L621.330546 280.513812 621.330546 64.949244 621.330546 64.949244z"
				p-id="2885"
				fill="#707070"
			></path>
		</svg>
		<!-- 文档 -->
		<svg v-if="fileType === 'office'" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="2706" width="100%">
			<path
				d="M589.104587 64.766073l0 243.928568 243.88252 0 0 649.176243-648.520303 0L184.466804 64.766073 589.104587 64.766073 589.104587 64.766073zM228.434178 431.241698l0 483.706607 560.586578 0L789.020756 431.234535 228.434178 431.241698 228.434178 431.241698zM700.701245 533.329794l-69.478398 279.526321-90.100064 0-32.212656-162.281013L476.305545 812.856116l-90.066295 0-69.485561-279.526321 88.523149 0 31.442106 172.767855 34.152844-172.767855 75.712379 0 33.387411 172.767855 32.206516-172.767855L700.701245 533.329794 700.701245 533.329794zM617.334535 64.766073l215.652572 215.659735L617.334535 280.425807 617.334535 64.766073 617.334535 64.766073z"
				p-id="2707"
				fill="#707070"
			></path>
		</svg>
		<!-- 视频 -->
		<video v-if="fileType === 'video'" :controls="false">
			<source :src="attachmentUrl" type="video/mp4" />
			您的浏览器不支持 HTML5 video 标签。
		</video>
		<!-- 其他 -->
		<svg
			v-if="fileType === 'other'"
			t="1650337096556"
			viewBox="0 0 1024 1024"
			version="1.1"
			xmlns="http://www.w3.org/2000/svg"
			p-id="3160"
			width="100%"
		>
			<path
				d="M592.019986 63.193251l0 244.591671 244.561995 0 0 650.973168L186.252473 958.75809 186.252473 63.193251 592.019986 63.193251 592.019986 63.193251zM230.340597 429.632037 230.340597 914.685315 792.492834 914.685315 792.492834 429.632037 230.340597 429.632037 230.340597 429.632037zM675.85537 787.612175l-70.331835 0 0-25.045419 37.664831 0L643.188366 581.747527l-37.375236 0 0-25.044396 70.043263 0L675.856393 787.612175 675.85537 787.612175zM461.901487 692.098821l-36.798091 0 0-39.866986 36.798091 0L461.901487 692.098821 461.901487 692.098821zM529.797853 692.098821l-36.781718 0 0-39.866986 36.781718 0L529.797853 692.098821 529.797853 692.098821zM597.732082 692.098821 560.94934 692.098821l0-39.866986 36.782741 0L597.732082 692.098821 597.732082 692.098821zM417.311943 787.612175l-70.317509 0L346.994434 556.704155l70.02996 0 0 25.044396-37.376259 0 0 180.819229 37.663808 0L417.311943 787.612175 417.311943 787.612175zM620.314403 63.193251l216.267579 216.252229L620.314403 279.44548 620.314403 63.193251 620.314403 63.193251z"
				p-id="3161"
				fill="#707070"
			></path>
		</svg>
	</div>
</template>

<style lang="scss" scoped>
.attachment-icon {
	display: flex;
	width: 90%;
	height: 90%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
</style>
